import React, { Component } from 'react';
import { Button, Drawer, Form, Input, Select, Row, Col } from 'antd';
import { inject, observer } from 'mobx-react';

@inject('store')
@observer
class DeptDrawer extends Component {
  formRef = React.createRef();
  closeHandler = () => {
    this.props.store.closeDeptDrawer();
  };

  /**
   * 回调保存部门信息函数
   * @param e
   */
  confirmHandler = async () => {
    try {
      let values = await this.formRef.current.validateFields();
      this.props.store.saveDept(values);
    } catch (e) {
      console.log(e);
    }
  };


  render() {
    const { store } = this.props;
    let { editData, visible, loading } = store.deptDrawerData;
    const layout = { labelCol: { span: 6 }, wrapperCol: { span: 18 } };
    let title = editData.id ? '编辑部门' : '上级部门：' + (editData.parentName ? editData.parentName : '无');
    const values = { ...editData };
    if (editData.status == null) {
      values.status = true;
    }
    if (!editData.type) {
      values.type = store.deptType[0] ? store.deptType[0].code : null;
    }
    return (
      <Drawer title={title} visible={visible} width={550} closable={false}
              bodyStyle={{ padding: '15px 15px 60px 15px' }}
              onClose={this.closeHandler} destroyOnClose={true}>
        <Form ref={this.formRef} {...layout} initialValues={values}>
          <Form.Item name='id' noStyle={true}> <Input type="hidden"/> </Form.Item>
          <Form.Item name='parentId' noStyle={true}> <Input type="hidden"/> </Form.Item>
          <Form.Item name='orgId' noStyle={true}> <Input type="hidden"/> </Form.Item>
          <Form.Item label="部门名称" name='name' rules={[{ required: true, message: '请输入部门名称！' }]}>
            <Input autoComplete="off"/>
          </Form.Item>

          <Form.Item label="部门代码" name='code'>
            <Input autoComplete="off"/>
          </Form.Item>

          <Form.Item label="部门类型" name='type' rules={[{ required: true, message: '请选择部门类型' }]}>
            <Select>
              {store.deptType.map(function(item, i) {
                if (!item.code) return;
                return <Select.Option key={item.code} value={item.code}>{item.name}</Select.Option>;
              })}
            </Select>
          </Form.Item>
          <Form.Item label="当前状态" name='status' rules={[{ required: true, message: '请选择当前状态' }]}>
            <Select>
              <Select.Option value={true}>启用</Select.Option>
              <Select.Option value={false}>停用</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item label="部门描述" name='remark'>
            <Input.TextArea autoComplete="off"/>
          </Form.Item>
        </Form>
        <div className='footer'>
          <Button onClick={this.closeHandler} style={{ marginRight: 8 }}>返回</Button>
          <Button loading={loading} onClick={this.confirmHandler} type="primary">保存</Button>
        </div>
      </Drawer>);
  }
}

export default DeptDrawer;
